import React, { useRef } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from '@material-ui/lab/Alert';

import {useAlertContext} from "../contexts/AlertContext"


import { useHistory } from "react-router-dom";

import $ from "jquery";
import service from "../service";

import {useBreadcrumbsContext} from "../contexts/BreadcrumbsContext"




function Copyright() {
	return (
		<Typography variant="body2" color="textSecondary" align="center">
			{"Copyright © "}
			<Link color="inherit" href="https://material-ui.com/">
				Your Website
			</Link>{" "}
			{new Date().getFullYear()}
			{"."}
		</Typography>
	);
}

function Alert(props) {
	return <MuiAlert elevation={6} variant="filled" {...props} />;
  }

const useStyles = makeStyles((theme) => ({
	paper: {
		marginTop: theme.spacing(8),
		display: "flex",
		flexDirection: "column",
		alignItems: "center",
	},
	avatar: {
		margin: theme.spacing(1),
		backgroundColor: theme.palette.secondary.main,
	},
	form: {
		width: "100%", // Fix IE 11 issue.
		marginTop: theme.spacing(1),
	},
	submit: {
		margin: theme.spacing(3, 0, 2),
	},
}));

export default function SignIn() {
	const classes = useStyles();

	var[ errMsg,setErrMsg ]= React.useState("")
	
	const {setBreadcrumbs} =useBreadcrumbsContext()

	const {setAlert} = useAlertContext()


	//   var formRef = useRef()

	let history = useHistory();
	async function onSubmit(e) {
		e.preventDefault();
		// console.log(formRef.current.querySelectorAll("input").reduce((p , c , i)=>{
		// 	p[c.]
		// },{}))
		var r = await service.users.signin($("form").serialize());
		console.log(r);
		if(r.State!=0 ){
			// setErrMsg(r.Message)
			setAlert({msg:r.Message,level:"error"})
			
		}else {

			history.push("/project");
		}
	}
	React.useEffect(()=>{
		setBreadcrumbs([])
	},[])
	return (
		<Container component="main" maxWidth="xs">
			<CssBaseline />
	
			<div className={classes.paper}>
				<Avatar className={classes.avatar}>
					<LockOutlinedIcon />
				</Avatar>
				<Typography component="h1" variant="h5">
					Sign in
				</Typography>
				<form className={classes.form} noValidate>
					<TextField
						variant="outlined"
						margin="normal"
						required
						fullWidth
						id="email"
						label="Email Address"
						name="email"
						autoComplete="email"
						autoFocus
					/>
					<TextField
						variant="outlined"
						margin="normal"
						required
						fullWidth
						name="password"
						label="Password"
						type="password"
						id="password"
						autoComplete="current-password"
					/>
					<FormControlLabel name="rememberMe" control={<Checkbox value="remember" color="primary" />} label="Remember me" />
					<Button
						type="button"
						fullWidth
						variant="contained"
						color="primary"
						className={classes.submit}
						onClick={onSubmit.bind(this)}
					>
						Sign In
					</Button>
					<Grid container>
						<Grid item xs>
							<Link href="#" variant="body2">
								Forgot password?
							</Link>
						</Grid>
						<Grid item>
							<Link href="#" variant="body2">
								{"Don't have an account? Sign Up"}
							</Link>
						</Grid>
					</Grid>
				</form>
			</div>
			<Box mt={8}>
				<Copyright />
			</Box>
			<Snackbar open={errMsg!=""}
			onClose={()=>{setErrMsg("")}}
			 autoHideDuration={3000} anchorOrigin={{vertical:"top" , horizontal:"center" }} >
				<Alert severity="error" onClose={()=>{setErrMsg("")}}>
				{errMsg}
				</Alert>
			</Snackbar>
		</Container>
	);
}
